<script setup>

</script>

<template>

  <div class="qian">
    
    <div>

      <table>
        <tr>
          <th><img src="../assets/logo.svg" alt="" class="logo"><a href="" class="logo1">vue</a></th>
          <th class="aaa"> <input type="text">
      <a href="./AboutView.vue">文档</a>
      <a href="">配置</a>
      <a href="">Blog</a>
      <a href="">历史版本</a></th>
        </tr>
      </table>
      
    </div>

  </div>
  <div class="zhong">
    <div id="class2">
      <h1>vue全栈</h1>
      <h4>开箱即用的中台前端/设计解决方案</h4>
      <input type="button" value="预览">
      <input type="button" value="开始使用">
    </div>
    <div id="class1">
      <div class="deng">
        <h1>登录</h1>
      </div>
      <div class="zh"><table>
        <tr>
          <th>账号：<input type="text" placeholder="请输入账号"><br>
            密码：<input type="text" placeholder="请输入密码"><br>
            性别：<input type="checkbox" name="" id="" value="">男<input type="checkbox" name="" id="" value="">女<br>
            
          
          </th>
        </tr>
      </table></div>
      <div class="id">
        <input type="button" value="登录">
        <input type="button" value="注册">
      </div>
    </div>
  </div>
  <div class="hou">
    
  </div>
</template>
<style>
*{
  margin: 0px;
  padding: 0px;
}
.qian{
  background-color: aliceblue(0, 255, 234);
  width: 100%;
  height: 40px;
  display: flex;
  align-items: center;
}
.zhong{
  background-image: url(../img/aaa.png);
  background-size: cover;
  width: 100%;
  height: 900px;
  display: flex;
  align-items: center;

  
}
#class1{
  background-color: rgb(240, 255, 255);
  width: 300px;
  height: 300px;
  transform: translateX(900px);
  border-radius: 5px;
 
 
 
}
#class2{
  width: 300px;
  height: 300px;
  transform: translateX(400px);
  
}
input{
  padding: 5px;
  margin: 10px;
  border-radius: 5px;
 
}
.aaa{
  transform: translateX(1100px);
  border-radius: 5px;
}
a{
  padding: 5px;
  margin: 10px;
  width: 30px;
  height: 30px;
  text-decoration: none; 
 
}
.logo{
  height: 30px; /* 控制Logo高度 */
  width: auto; /* 保持宽高比 */
  transform: translateX(10px);
  
}
.deng{

  position: absolute;
  left: 100px;
}

.zh{
  margin-top: 50px;
  margin-bottom: 10px;
}
.id{
  position: absolute;
  left: 70px;
  
}

</style>
